<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI助手</title>
    <link id="theme" rel="stylesheet" href="../css/layout.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            background: white;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            display: flex;
            flex-direction: column;
            height: 100vh;
            overflow: hidden;
        }

        .ai-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 12px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: move;
            user-select: none;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .ai-title {
            font-weight: 600;
            font-size: 14px;
            display: flex;
            align-items: center;
        }

        .ai-title::before {
            content: "🤖";
            margin-right: 8px;
            font-size: 16px;
        }

        .ai-controls {
            display: flex;
            gap: 8px;
        }

        .control-btn {
            width: 20px;
            height: 20px;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .minimize-btn {
            background: #ff5f56;
            color: white;
        }

        .maximize-btn {
            background: #ffbd2e;
            color: white;
        }

        .close-btn {
            background: #27ca3f;
            color: white;
        }

        .settings-btn {
            background: #6c757d;
            color: white;
        }

        .control-btn:hover {
            transform: scale(1.1);
            opacity: 0.8;
        }

        .ai-chat-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .ai-messages {
            flex: 1;
            padding: 16px;
            overflow-y: auto;
            background: #f8f9fa;
            scrollbar-width: thin;
        }

        .ai-messages::-webkit-scrollbar {
            width: 6px;
        }

        .ai-messages::-webkit-scrollbar-track {
            background: transparent;
        }

        .ai-messages::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 3px;
        }

        .message {
            margin-bottom: 16px;
            display: flex;
            flex-direction: column;
        }

        .message.user {
            align-items: flex-end;
        }

        .message.assistant {
            align-items: flex-start;
        }

        .message-content {
            max-width: 80%;
            padding: 12px 16px;
            border-radius: 18px;
            word-wrap: break-word;
            white-space: pre-wrap;
            line-height: 1.4;
            font-size: 14px;
        }

        .message.user .message-content {
            background: #007AFF;
            color: white;
            border-bottom-right-radius: 6px;
        }

        .message.assistant .message-content {
            background: white;
            color: #333;
            border: 1px solid #e1e5e9;
            border-bottom-left-radius: 6px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .message-time {
            font-size: 11px;
            color: #666;
            margin-top: 4px;
            padding: 0 8px;
        }

        .ai-input-container {
            padding: 16px;
            background: white;
            border-top: 1px solid #e1e5e9;
            display: flex;
            gap: 12px;
            align-items: flex-end;
        }

        .ai-input {
            flex: 1;
            min-height: 36px;
            max-height: 120px;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 20px;
            resize: none;
            font-family: inherit;
            font-size: 14px;
            line-height: 1.4;
            outline: none;
            transition: border-color 0.2s;
        }

        .ai-input:focus {
            border-color: #007AFF;
        }

        .send-btn {
            width: 36px;
            height: 36px;
            background: #007AFF;
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            font-size: 16px;
        }

        .send-btn:hover {
            background: #0056b3;
            transform: scale(1.05);
        }

        .send-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
        }

        .thinking {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            background: white;
            border: 1px solid #e1e5e9;
            border-radius: 18px;
            border-bottom-left-radius: 6px;
            max-width: 80%;
            margin-bottom: 16px;
        }

        .thinking-dots {
            display: flex;
            gap: 4px;
        }

        .thinking-dot {
            width: 8px;
            height: 8px;
            background: #666;
            border-radius: 50%;
            animation: thinking 1.4s infinite;
        }

        .thinking-dot:nth-child(2) {
            animation-delay: 0.2s;
        }

        .thinking-dot:nth-child(3) {
            animation-delay: 0.4s;
        }

        @keyframes thinking {
            0%, 60%, 100% {
                transform: translateY(0);
                opacity: 0.5;
            }
            30% {
                transform: translateY(-10px);
                opacity: 1;
            }
        }

        .context-info {
            padding: 8px 12px;
            background: #f0f8ff;
            border: 1px solid #b3d9ff;
            border-radius: 8px;
            margin-bottom: 12px;
            font-size: 12px;
            color: #0066cc;
        }

        .resize-handle {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 20px;
            height: 20px;
            cursor: nw-resize;
            background: linear-gradient(-45deg, transparent 6px, #ccc 6px, #ccc 8px, transparent 8px, transparent 12px, #ccc 12px, #ccc 14px, transparent 14px);
        }

        /* 最小化状态 */
        body.minimized {
            height: 50px !important;
            overflow: hidden;
        }

        body.minimized .ai-chat-container {
            display: none;
        }

        body.minimized .ai-header {
            border-radius: 8px 8px 8px 8px;
        }

        body.minimized .resize-handle {
            display: none;
        }

        /* 无消息状态 */
        .no-messages {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: #666;
            text-align: center;
            padding: 20px;
        }

        .no-messages-icon {
            font-size: 48px;
            margin-bottom: 16px;
            opacity: 0.5;
        }

        .no-messages-text {
            font-size: 16px;
            margin-bottom: 8px;
        }

        .no-messages-hint {
            font-size: 12px;
            opacity: 0.7;
        }
    </style>
</head>
<body>
    <div class="ai-header" id="aiHeader">
        <div class="ai-title">DeepSeek AI 助手</div>
        <div class="ai-controls">
            <button class="control-btn settings-btn" id="settingsBtn" title="设置">⚙</button>
            <button class="control-btn minimize-btn" id="minimizeBtn" title="最小化">-</button>
            <button class="control-btn maximize-btn" id="maximizeBtn" title="调整大小">□</button>
            <button class="control-btn close-btn" id="closeBtn" title="关闭">×</button>
        </div>
    </div>
    
    <div class="ai-chat-container" id="aiChatContainer">
        <div class="ai-messages" id="aiMessages">
            <div class="no-messages" id="noMessages">
                <div class="no-messages-icon">💬</div>
                <div class="no-messages-text">开始与AI助手对话</div>
                <div class="no-messages-hint">我可以帮助你进行翻译、答疑和文本处理</div>
            </div>
        </div>
        
        <div class="ai-input-container">
            <textarea class="ai-input" id="aiInput" placeholder="输入你的问题..." rows="1"></textarea>
            <button class="send-btn" id="sendBtn">
                <span>▲</span>
            </button>
        </div>
    </div>
    
    <div class="resize-handle" id="resizeHandle"></div>
    
    <!-- 移除语音识别功能 -->
    <!-- <script src="../js/voiceRecognition.js"></script> -->
    <!-- <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('[AI Assistant] Page loaded, initializing voice recognition...');
            
            setTimeout(function() {
                // 使用原有的语音识别系统，但添加调试信息
                console.log('[AI Assistant] Starting voice recognition initialization');
                
                // 检查是否有必要的函数可用
                if (typeof initVoiceRecognitionForPage === 'function') {
                    console.log('[AI Assistant] initVoiceRecognitionForPage function found');
                    initVoiceRecognitionForPage();
                    console.log('[AI Assistant] Voice recognition initialization completed');
                } else {
                    console.error('[AI Assistant] initVoiceRecognitionForPage function not available');
                    console.error('[AI Assistant] Available functions:', Object.keys(window).filter(k => k.includes('Voice')));
                }
            }, 1000); // 增加延迟确保所有模块加载完成
        });
    </script> -->
    
    <script src="../js/aiAssistant.js"></script>
</body>
</html> 